<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar >
			<block slot="left">
				<image src="../../static/image/cloud/y_03.png" mode="" class="top-img left"></image>
			</block>
			<view class="top-tab flex-box">
				<view :class="{active: show == index}" v-for="(item,index) in navList" 
				:key="index" @click="switchTab(index)" style="line-height:44px ;">
					{{item.name}}
				</view>
			</view>
			<block slot="right">
				<image src="../../static/image/mine/r.png" mode="" class="top-img"></image>
			</block>
		</uni-nav-bar>
		<!-- -->
		<!-- 滚动列表 -->
		<view class="page-content">
			<mescroll-uni :up="up" :down="down" :fixed="false" @up="upc" @down="downc"  >
				<view class="date-bar flex-box">
					<view class="date-bar-left">
						云村热评墙<text class="iconfont">&#xe775;</text>
						<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
						circular="true" vertical="true" class="date-bar-swiper" >
							<swiper-item v-for="(item,index) in msg" :key="index">
								{{item.name}}
							</swiper-item>
						</swiper>
					</view>	
					<view>
						<view>
							{{curDate[1]}}
						</view>
						<view class="date-bar-num">
							{{curDate[2]}}
						</view>
					</view>
				</view>
				<!-- 内容模块 -->
				<view class="list-content flex-box">
					<view class="video-list flex-box">
						<view class="video-item" v-for="(item, index) in video1" :key="index">
							<view class="video-wrap">
								<image :src="item.picUrl" mode="widthFix" class="img"></image>
								<view class="video-con">
									<view class="desc">
										{{item.name}}
									</view>
									<view class="creater-bar flex-box">
										<view class="name">
											{{item.playCount}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="video-list flex-box">
						<view class="video-item" v-for="(item, index) in video2" :key="index">
							<view class="video-wrap">
								<image :src="item.picUrl" mode="widthFix" class="img"></image>
								<view class="video-con">
									<view class="desc">
										{{item.name}}
									</view>
									<view class="creater-bar flex-box">
										<view class="name">
											{{item.playCount}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		
		
	</view>
</template>

<script>
	import "@/static/fonts/iconfont.ttf"
	import MescrollUni from "../../components/mescroll-uni/mescroll-uni.vue"
	import uniNavBar from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				navList: [
						{ name: '广场', id: 3452},
						{ name: '动态', id: 3462},
					],
				msg: [
						{ name: '他是我见过最年少有为的人', id: ''},
						{ name: '因为一个人而失眠，这真的好吗', id: ''},
						{ name: '花开花落，没有悲愁怎么是少年？', id: ''},
						{ name: '再见，最后再也没见', id: ''},
						{ name: '番茄西红柿配蛋汤，不要糖', id: ''},
					],
				show:0,
				up:{
					auto:false,
					page:{
						num:0,
						size:6
					}
				},
				down:{
					auto:false
				},
				curDate:String(new Date()).split(" "),
				flag:0,
				video1:[],
				video2:[]
				
			}
		},
		components:{
			uniNavBar,MescrollUni
		},
		onLoad() {
			this.getVeVedio()
		},
		methods: {
			switchTab(index){
				this.show=index;
				this.getVeVedio(index*6);
				if(this.flag!=0){
					 this.flag=0;
					 this.video1=[];
					 this.video2=[];
					 this.getVeVedio(index*6);
				}
			},
			
			getVeVedio(index=0){
				this.$API.getSongs().then(res=>{
					if(this.flag!=0){
						let video1=res.data.result.splice(index,6);
						let video2=res.data.result.splice(index,6);
						 this.video1 = this.video1.concat(video1);
						 this.video2 = this.video2.concat(video2);
					}else{
						let video1=res.data.result.splice(index,6);
						let video2=res.data.result.splice(index,6);
						this.video1 = video1.splice(0,3);
						this.video2 = video2.splice(4,3);
					}
				})
			},
			
			 async upc(mescroll){ 
				this.flag+=1;
				await this.getVeVedio(this.flag);
				mescroll.endSuccess();
			},
			
			async downc(mescroll){
				this.flag=0;
				await this.getVeVedio();
				mescroll.endSuccess();
			}
			
			
			
			
		}
	}
</script>

<style lang="scss">
	@font-face {
	  font-family: 'iconfont';  /* Project id 4297633 */
	  src: url('//at.alicdn.com/t/c/font_4297633_ltqefecs7f.woff2?t=1698065314825') format('woff2'),
	       url('//at.alicdn.com/t/c/font_4297633_ltqefecs7f.woff?t=1698065314825') format('woff'),
	       url('//at.alicdn.com/t/c/font_4297633_ltqefecs7f.ttf?t=1698065314825') format('truetype');
	}
	
page{
	background: #f8f8f8;
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifdef H5 */
	top:44px;  // h5 无状态栏
	/* #endif */
}
.top-img {
	width: 50rpx;
	height: 40rpx;
	&.left {
		margin-left: 10rpx;
	}
}
.top-tab{
	width:310rpx;
	/* #ifdef MP-WEIXIN */
	width:250rpx;
	/* #endif */
	margin: 0 auto;
	justify-content: space-between;
	.active{
		position:relative;
		color:#f32628;
		&:after{
			position:absolute;
			content:'';
			left:50%;
			width: 94rpx;
			height: 4rpx;
			bottom: 0rpx;
			transform: translateX(-50%);
			background: #f32628;
			border-radius: 4rpx;
		}
	}
}
.date-bar{
	width: 686rpx;
	height: 160rpx;
	padding: 20rpx 34rpx;
	margin: 20rpx auto;
	border-radius: 14rpx;
	color:#fff;
	background: rgba(0,0,0,.7);
	line-height: 70rpx;
	font-weight: 600;
	justify-content: space-between;
	.date-bar-left{
		font-size: 34rpx;
		font-weight: 600;
	}
	.date-bar-num{
		margin-top:-20rpx;
		font-size: 44rpx;
	}
}
.list-content{
	padding-left:30rpx;
	flex-direction: row; // 主轴方向设置为水平方向
}
.video-list{
	flex-direction: column; // 主轴方向设置为垂直方向
}
.video-item{
	width: 334rpx;
	margin-right:20rpx;
	margin-bottom:20rpx;
	border-radius: 14rpx;
	overflow: hidden;
	color:#353536;
	background: #fff;
	line-height: 36rpx;
	.img{
		display:block;
		width:100%;
		min-height:188rpx;
	}
	.avactor{
		width: 28rpx;
		height:28rpx;
		margin-right: 10rpx;
		border-radius: 28rpx;
		background: #ddd;
	}
	.video-con{
		padding: 16rpx 16rpx 30rpx;
	}
	.avactor-box {
		align-items: center;
	}
	.creater-bar{
		margin-top: 10rpx;
		align-items: center;
		color:#999;
		font-size: 20rpx;
	}
}

.date-bar-swiper{
	width:430rpx;
	height:40rpx;
	line-height: 40rpx;
	color:#d0d2d3;
	font-size: 24rpx;
}
</style>
